/**
 * create by cyw 2020/5/27
 * 订单页
 */

import "./Order.scss"
import React from 'react'
import { connect } from "react-redux"
import { getOrderData } from "../action/orderAction"
import ListItem from "./ListItem/ListItem"
import ScrollView from "component/ScrollView/ScrollView"



class Order extends React.Component {
    constructor(props) {
        super(props)
        this.page = 0
        this.fetchData(this.page)
        this.state = {
            isend: false
        }
    }
    componentDidMount() {
        console.log('order')
        window.scrollTo(0, 0)
    }
    onLoadPage() {
        this.page++
        // console.log('page', this.page)
        if (this.page > 3) {
            this.setState({
                isend: true,
            })
        } else {
            // console.log('fetchData')
            this.fetchData(this.page)
        }
    }
    fetchData() {
        this.props.dispatch(getOrderData(this.page))
    }
    renderOrderList() {
        let list = this.props.orderList || [];
        return list.map((item, index) => {
            return <ListItem key={index} itemData={item}></ListItem>
        })
    }
    render() {

        return <div className="order">
            <div className="header">订单</div>
            <ScrollView loadCallback={this.onLoadPage.bind(this)} isend={this.state.isend} >
                {this.renderOrderList()}
            </ScrollView>
        </div>
    }
}

export default connect((state) => ({
    orderList: state.orderReducer.orderList
}))(Order)